<template>
  <div class="doneTable" :style="cDoneHeight">
    <portalTab :tabData="tabData" :tabValue="tabValue" @click="clickFun" @iconClick="iconClickFun">
      <template :slot="tabValue">
        <component
          :is="tabValue"
          v-if="cIsHaveModelValue"
          @tableMount="tableMountFun"
          :height="height"
          @rowClickFun="rowClickFun"
        ></component>
      </template>
    </portalTab>
  </div>
</template>

<script>
import portalTab from "@/components/portalTab";
import BusinessToDo from "../components/BusinessToDo";
import BusinessDone from "../components/BusinessDone";
import listFilter from "@/components/listFilter";
import portalDialog from "@/components/portalDialog";
// "#e73b44"

export default {
  name: "doneTable",
  props: {
    height: {
      type: [Number, String],
      default: "100%"
    }
  },
  components: {
    portalTab,
    BusinessToDo,
    BusinessDone,
    listFilter,
    portalDialog
  },
  computed: {
    cDoneHeight () {
      let height = this.height.toString();
      return {
        height: height + "px"
      };
    },
    cIsHaveModelValue () {
      let arr = this.tabData.map(v => v.name);
      return arr.includes(this.tabValue);
    },
    cIsTabValueModelValue () {
      let arr = this.tabModelData.map(v => v.name);
      return arr.includes(this.tabValueModelValue);
    }
  },

  methods: {
    clickFun (tabValue) {
      this.tabValue = tabValue;
    },
    clickModelFun (tabValue) {
      this.tabValueModelValue = tabValue;
    },
    tableMountFun ({ data, name }) {
      let currentTabData = this.tabData.find(v => v.name === name) || {};
      if (currentTabData.number === 0) {
        this.$set(currentTabData, "number", data.length);
      }
    },
    iconClickFun () {
      this.$router.push({ path: "/dashboard/personal/bussiness" });
    },
    rowClickFun ({ row, column, event }) {
      window.open(row.url);
    }
  },
  data () {
    return {
      status: status,
      tabValue: "BusinessToDo",
      tabData: [
        { id: 1, label: "业务待办", name: "BusinessToDo", number: 0 },
        { id: 2, label: "业务已办", name: "BusinessDone" }
      ],
      tabValueModelValue: "listFilterToDo",
      tabModelData: [
        { id: 1, label: "业务待办", name: "listFilterToDo" },
        { id: 2, label: "业务已办", name: "listFilterDo" }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.icon {
  display: inline-block;
}
.triangle {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  .borderColor(border-left-color);
  top: 1px;
  display: inline-block;
}
.doneIcon {
  position: relative;
  left: -1px;
  top: 1px;
}
.doneTable {
  /deep/ .portalTab {
    height: 100%;
    .el-tabs__header {
      background: #ffffff;
    }
  }
}
</style>